import React, { Component } from 'react'
import { NavBar, WingBlank, SearchBar, WhiteSpace } from 'antd-mobile';

import { NavLink, Link } from 'react-router-dom';
import GoBack from '../../components/GoBack';
import Banner from './components/Banner/Banner'
import { reqAllGoods, reqBanner, reqCate, reqGroup, reqNew, reqSeckil } from '../../http/api';
import HomeCate from './components/HomeCate/HomeCate';
import './Home.less'
import './components/AllGoods/AllGoods.less'
import NewShare from './components/BewShare/NewShare';
import Group from './components/Group/Group'
import Navimg from './components/NavImg/Navimg';
import Seckil from './components/seckil/Seckil'
import AllGoods from './components/AllGoods/AllGoods';
export default class extends Component {
    constructor() {
        super()
        // 初始化数据
        this.state = {
            // Bannerlist: [],
            // cateList: []
            newlist: [],
            grouplist: [],
            seckillist: [],
            allList: [],
            goods: [
                {
                    id: 1, title: "新鲜水果"
                }, {
                    id: 2, title: "特价水果"
                }, {
                    id: 3, title: "特价蔬菜"
                }, {
                    id: 4, title: "调味用品"
                },

            ],
            n: 0
        }


    }
    componentDidMount() {
        reqNew().then(res => {
            if (res.data.code === 200) {
                // 赋值
                this.setState({
                    newlist: res.data.list
                })
            }
        })

        reqGroup().then(res => {
            if (res.data.code === 200) {
                // 赋值
                this.setState({
                    grouplist: res.data.list
                })
            }
        })

        reqSeckil().then(res => {
            if (res.data.code === 200) {
                // 赋值
                this.setState({
                    seckillist: res.data.list
                })
            }
        })

        // 一进页面就调用
       this.ChangeN(0,0)
    }
   
    ChangeN(index, n) {
        this.setState({
            n: index
        })
        reqAllGoods().then(res => {
            if (res.data.code === 200) {
                // 赋值
                this.setState({
                    allList: res.data.list ? res.data.list[n].content : []
                })
            }
        })
    }
    render() {
        let { newlist, grouplist, seckillist, allList, goods, n } = this.state
        return (
            <div className="home">
                <NavBar
                    mode="dark"
                    icon={<GoBack {...this.props}></GoBack>}
                >首页</NavBar>
                <div className="nav_logo">
                    <SearchBar placeholder="搜索" maxLength={8} />
                    <WhiteSpace />
                </div>
                {/* <NavLink to="/search">跳转到搜索页</NavLink>
                <Link to="/search">跳转到搜索页</Link>
                <button onClick={()=>this.props.history.push('/search')}>push跳转到搜索页</button>
                <button onClick={()=>this.props.history.replace('/search')}>replace跳转到搜索页</button>
                <button onClick={()=>this.props.history.go(-1)}>返回</button>
                <button onClick={()=>this.props.history.goBack()}>返回</button>
                <button onClick={()=>this.props.history.go(0)}>刷新</button> */}

                {/*  */}
                {/* 分类 */}
                {
                    // cateList.length > 0 ? <HomeCate cateList={cateList}></HomeCate> : null
                }
                {/* 新人专享 */}
                <div className="new_share">

                    {
                        newlist.length > 0 ? <NewShare newlist={newlist}></NewShare> : null
                    }
                    {/* <NewShare newlist={newlist}></NewShare> */}
                </div>

                <Navimg></Navimg>

                {/* 万人团 */}
                {
                    grouplist.length > 0 ? <Group grouplist={grouplist}></Group> : null
                }

                {/* 秒杀 */}
                {
                    seckillist.length > 0 ? <Seckil seckillist={seckillist}></Seckil> : null
                }

                {/* 首页全部商品 */}

                <div>
                    <div className="allgoods">
                        <div className="gooods_show">
                            {
                                goods.map((item, index) => {
                                    return (
                                        <div key={item.id} className={index === n ? "select" : ""} onClick={() => this.ChangeN(index, item.id)}>{item.title}</div>
                                    )
                                })
                            }
                        </div>
                        <div className="allgoods_show">
                            {
                                allList.map((item, index) => {
                                    return (
                                        <div key={item.id} className="goods_list" onClick={() => this.props.history.push('/detail/' + item.id)}>
                                            <div className="left">
                                                <img src={item.img} alt="" />
                                            </div>
                                            <div className="right">
                                                <p>{item.goodsname}</p>
                                                <p>￥{item.price}元</p>
                                                <del>原价：{item.market_price}元</del>
                                            </div>

                                        </div>
                                    )
                                })
                            }

                        </div>
                    </div>
                </div>









                {/* 轮播图 */}
                {/* 传递给子组件 ---由于一开始不会自动播放，所以要在有数据，才开始渲染有轮播图*/}

                {
                    // Bannerlist.length > 0 ? <Banner Bannerlist={Bannerlist}></Banner> : null
                }


            </div>
        )
    }
}
